<template>
  <div class="systemConfig">
    <el-form
      ref="baseForm"
      :model="baseForm"
      :rules="rules"
      label-width="140px"
    >
      <el-tabs
        v-model="editableTabsValue"
        type="card"
        editable
        @edit="handleTabsEdit"
        @tab-click="handleClick"
      >
        <template v-for="(item, index) in baseForm.weCom">
          <el-tab-pane
            v-if="item.action && item.action == 'add'"
            :label="'新增'"
            :name="index + ''"
            :key="index"
          >
            <span slot="label">新增</span>

            <div style="max-height: 600px; overflow-y: auto">
              <el-row :gutter="20" style="margin-top: 15px">
                <el-col :span="12" :offset="6" :pull="6">
                  <el-form-item
                    label="公司名称"
                    :prop="'weCom.' + index + '.accountConfigId'"
                    :rules="rules.accountConfigId"
                  >
                    <MsgAccountDialog
                      v-model="item.accountConfigId"
                      :title="item.name"
                      :messageType="'5'"
                      :itemIndex="index"
                      :clearable="false"
                      @change="onAccountChange"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item
                    label="企业号Id"
                    :prop="'weCom.' + index + '.qyhCorpId'"
                    :rules="rules.qyhCorpId"
                  >
                    <el-input
                      v-model="item.qyhCorpId"
                      disabled
                      placeholder="请输入CorpId"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item
                    label="同步密钥"
                    :prop="'weCom.' + index + '.qyhCorpSecret'"
                    :rules="rules.qyhCorpSecret"
                  >
                    <el-input
                      disabled
                      v-model="item.qyhCorpSecret"
                      placeholder="请输入CorpSecret"
                    >
                      <el-button
                        slot="append"
                        @click="checkQy(1, item)"
                        :loading="testSyncLoading"
                        >同步测试
                      </el-button>
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item
                    label="应用凭证"
                    :prop="'weCom.' + index + '.qyhAgentId'"
                    :rules="rules.qyhAgentId"
                  >
                    <el-input
                      v-model="item.qyhAgentId"
                      disabled
                      placeholder="请输入AgentId"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item
                    label="凭证密钥"
                    :prop="'weCom.' + index + '.qyhAgentSecret'"
                    :rules="rules.qyhAgentSecret"
                  >
                    <el-input
                      disabled
                      v-model="item.qyhAgentSecret"
                      placeholder="请输入AppSecret"
                    >
                      <el-button
                        slot="append"
                        @click="checkQy(0, item)"
                        :loading="testQyLoading"
                        >连接测试
                      </el-button>
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item
                    label="(回调)token"
                    :prop="'weCom.' + index + '.token'"
                  >
                    <el-input
                      v-model="item.token"
                      autocomplete="off"
                      disabled
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item
                    label="(回调)encodAESKey"
                    :prop="'weCom.' + index + '.encodingAESKey'"
                  >
                    <el-input
                      v-model="item.encodingAESKey"
                      autocomplete="off"
                      disabled
                    ></el-input>
                  </el-form-item>
                </el-col>
                <!-- 是否互联企业 -->
                <el-col :span="12" :offset="6" :pull="6">
                  <el-form-item
                    label="是否互联"
                    :prop="'weCom.' + index + '.isLinkedCorp'"
                  >
                    <el-checkbox
                      disabled
                      v-model="item.isLinkedCorp"
                    ></el-checkbox>
                  </el-form-item>
                </el-col>

                <el-col :span="12" :offset="6" :pull="6">
                  <el-form-item
                    label="组织上级"
                    :prop="'weCom.' + index + '.orgParent'"
                  >
                    <el-select
                      v-model="item.orgParent"
                      clearable
                      placeholder="请选择"
                    >
                      <el-option
                        v-for="company in companyList"
                        :key="company.fullName"
                        :label="company.fullName"
                        :value="company.id"
                      >
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>

                <el-col v-show="!item.isLinkedCorp">
                  <el-form-item label="触发事件">
                    <el-table :data="item.wxEvents" :border="true">
                      <el-table-column
                        prop="select"
                        label=""
                        width="50"
                        :align="'center'"
                      >
                        <template slot-scope="scope">
                          <el-checkbox v-model="scope.row.select" />
                        </template>
                      </el-table-column>
                      <el-table-column
                        prop="title"
                        label="触发事件"
                        width="200"
                      />
                      <el-table-column prop="desc" label="描述" />
                    </el-table>
                  </el-form-item>
                </el-col>
              </el-row>
            </div>
          </el-tab-pane>
          <el-tab-pane
            v-else
            :label="item.name"
            :name="index + ''"
            :key="index + '1'"
          >
            <span slot="label">{{ item.name }}</span>
            <div style="max-height: 600px; overflow-y: auto">
              <el-row :gutter="20" style="margin-top: 15px">
                <el-col :span="12" :offset="6" :pull="6">
                  <el-form-item
                    label="公司名称"
                    :prop="'weCom.' + index + '.accountConfigId'"
                    :rules="rules.accountConfigId"
                  >
                    <MsgAccountDialog
                      v-model="item.accountConfigId"
                      :title="item.name"
                      :messageType="'5'"
                      :itemIndex="index"
                      @change="onAccountChange"
                    />
                    <!-- <el-input v-model="item.name" clearable placeholder="请输入公司名称" /> -->
                    <!-- {{ item.name }} -->
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item
                    label="企业号Id"
                    :prop="'weCom.' + index + '.qyhCorpId'"
                    :rules="rules.qyhCorpId"
                  >
                    <el-input
                      disabled
                      v-model="item.qyhCorpId"
                      placeholder="请输入CorpId"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item
                    label="同步密钥"
                    :prop="'weCom.' + index + '.qyhCorpSecret'"
                    :rules="rules.qyhCorpSecret"
                  >
                    <el-input
                      disabled
                      v-model="item.qyhCorpSecret"
                      placeholder="请输入CorpSecret"
                    >
                      <el-button
                        slot="append"
                        @click="checkQy(1, item)"
                        :loading="testSyncLoading"
                        >同步测试
                      </el-button>
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item
                    label="应用凭证"
                    :prop="'weCom.' + index + '.qyhAgentId'"
                    :rules="rules.qyhAgentId"
                  >
                    <el-input
                      v-model="item.qyhAgentId"
                      disabled
                      placeholder="请输入AgentId"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item
                    label="凭证密钥"
                    :prop="'weCom.' + index + '.qyhAgentSecret'"
                    :rules="rules.qyhAgentSecret"
                  >
                    <el-input
                      disabled
                      v-model="item.qyhAgentSecret"
                      placeholder="请输入AppSecret"
                    >
                      <el-button
                        slot="append"
                        @click="checkQy(0, item)"
                        :loading="testQyLoading"
                        >连接测试
                      </el-button>
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item
                    label="(回调)token"
                    :prop="'weCom.' + index + '.token'"
                  >
                    <el-input
                      v-model="item.token"
                      autocomplete="off"
                      disabled
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item
                    label="(回调)encodAESKey"
                    :prop="'weCom.' + index + '.encodingAESKey'"
                  >
                    <el-input
                      v-model="item.encodingAESKey"
                      autocomplete="off"
                      disabled
                    ></el-input>
                  </el-form-item>
                </el-col>
                <!-- 是否互联企业 -->
                <el-col :span="12" :offset="6" :pull="6">
                  <el-form-item
                    label="是否互联"
                    :prop="'weCom.' + index + '.isLinkedCorp'"
                  >
                    <el-checkbox
                      disabled
                      v-model="item.isLinkedCorp"
                    ></el-checkbox>
                  </el-form-item>
                </el-col>

                <el-col :span="12" :offset="6" :pull="6">
                  <el-form-item
                    label="组织上级"
                    :prop="'weCom.' + index + '.orgParent'"
                  >
                    <el-select
                      v-model="item.orgParent"
                      clearable
                      placeholder="请选择"
                    >
                      <el-option
                        v-for="company in companyList"
                        :key="company.fullName"
                        :label="company.fullName"
                        :value="company.id"
                      >
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>

                <el-col v-show="!item.isLinkedCorp">
                  <el-form-item label="触发事件">
                    <el-table :data="item.wxEvents" :border="true">
                      <el-table-column
                        prop="select"
                        label=""
                        width="50"
                        :align="'center'"
                      >
                        <template slot-scope="scope">
                          <el-checkbox v-model="scope.row.select" />
                        </template>
                      </el-table-column>
                      <el-table-column
                        prop="title"
                        label="触发事件"
                        width="200"
                      />
                      <el-table-column prop="desc" label="描述" />
                    </el-table>
                  </el-form-item>
                </el-col>
                <el-col>
                  <el-form-item label="同步反馈">
                    <el-table :data="item.wxResults" :border="true">
                      <el-table-column prop="synType" label="同步类型" />
                      <el-table-column prop="recordTotal" label="总数" />
                      <el-table-column
                        prop="synSuccessCount"
                        label="同步成功数"
                      />
                      <el-table-column prop="synFailCount" label="同步失败数" />
                      <el-table-column prop="unSynCount" label="未同步数" />
                      <el-table-column
                        prop="synDate"
                        label="同步时间"
                        :formatter="jsbos.tableDateFormat"
                      />
                      <el-table-column label="操作" width="180">
                        <template slot-scope="scope">
                          <el-popconfirm
                            v-show="!item.isLinkedCorp"
                            title="确定该操作吗？"
                            style="margin-right: 10px"
                            @confirm="syncSysToQyWX(scope.row, item)"
                          >
                            <el-button
                              slot="reference"
                              size="mini"
                              type="text"
                              :loading="scope.row.loading"
                              >同步</el-button
                            >
                          </el-popconfirm>
                          <el-popconfirm
                            v-show="!item.isLinkedCorp"
                            title="确定该操作吗？"
                            style="margin-right: 10px"
                            @confirm="syncPullQyTXLToSys(scope.row, item)"
                          >
                            <el-button
                              slot="reference"
                              size="mini"
                              type="text"
                              :loading="scope.row.loading"
                              >拉取</el-button
                            >
                          </el-popconfirm>
                          <el-popconfirm
                            v-show="item.isLinkedCorp"
                            title="确定该操作吗？"
                            style="margin-right: 10px"
                            @confirm="syncPullQyHlToSys(scope.row, item)"
                          >
                            <el-button
                              slot="reference"
                              size="mini"
                              type="text"
                              :loading="scope.row.loading"
                              >互联企业</el-button
                            >
                          </el-popconfirm>
                        </template>
                      </el-table-column>
                    </el-table>
                  </el-form-item>
                </el-col>
              </el-row>
            </div>
          </el-tab-pane>
        </template>
      </el-tabs>
      <div style="margin: 10px 0">
        <el-button
          type="primary"
          size="small"
          :loading="btnLoading"
          class="saveBtn"
          @click="submitForm('WeComConfig')"
          >保存</el-button
        >
      </div>
    </el-form>
  </div>
</template>

<script>
import MsgAccountDialog from "./msgAccountDialog";
import { getInfo } from "@/views/message/api/mcAccountConfig";
import {
  testQy,
  getSynThirdTotal,
  getWxCpSynThirdInfoTotal,
  updateSystemConfig,
  synAllOrgSysToQyWX,
  synAllUserSysToQyWX,
  qyWXCorpDeptList,
  qyWXCorpUserList,
  linkedCorpDepartmentList,
  linkedCorpUserList,
} from "@/api/system/sysConfig";
import { getAllCompanyList } from "@/api/permission/organize";
import { isEmpty } from "@/utils/isEmpty";
const CATEGORY = "WeComConfig";
export default {
  name: "SysConfigQyhMutilSetting",
  components: { MsgAccountDialog },
  props: {
    tabsData: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    var validateCropId = (rule, value, callback) => {
      let index = rule.fullField.split(".")[1];
      if (this.$isEmpty(value)) {
        callback(new Error("企业号Id不能为空"));
      } else if (
        !this.$isEmpty(
          this.baseForm.weCom.filter((v, i) => {
            return v.qyhCorpId == value && i != index;
          })
        )
      ) {
        callback(new Error("有重复的企业号Id"));
      } else {
        callback();
      }
    };
    return {
      btnLoading: false,
      QYHConfig: {
        accountConfigId: "",
        name: "",
        qyhCorpId: "",
        qyhAgentId: "",
        qyhAgentSecret: "",
        qyhCorpSecret: "",
        token: "",
        encodingAESKey: "",
        qyhIsSynOrg: "",
        qyhIsSynUser: "",
        isLinkedCorp: false, //是否互联企业
        action: "add", //action属性（‘view’：查看状态，'edit’编辑状态，'add’新增状态）
      },
      baseForm: {
        weCom: this.tabsData,
      },
      rules: {
        accountConfigId: [
          { required: true, message: "请选择", trigger: "change" },
        ],
        name: [
          { required: true, message: "企业名称不能为空", trigger: "blur" },
        ],
        qyhCorpId: [
          { required: true, message: "企业号ID不能为空", trigger: "blur" },
          {
            required: true,
            validator: validateCropId,
            trigger: "blur",
          },
        ],
        qyhAgentId: [
          { required: true, message: "应用凭证不能为空", trigger: "blur" },
        ],
        qyhAgentSecret: [
          { required: true, message: "凭证秘钥不能为空", trigger: "blur" },
        ],
        qyhCorpSecret: [
          { required: true, message: "同步秘钥不能为空", trigger: "blur" },
        ],
      },
      editableTabsValue: 0,
      tabIndex: 0,
      testQyLoading: false,
      testSyncLoading: false,
      companyList: [],
      wxEvents: [
        {
          select: false,
          title: "启用同步组织",
          desc: "新增、删除、修改组织信息触发同步组织事件",
        },
        {
          select: false,
          title: "启用同步用户",
          desc: "新增、删除、修改用户信息触发同步用户事件",
        },
      ],
      wxResults: [
        {
          recordTotal: "",
          synDate: "",
          synFailCount: "",
          synSuccessCount: "",
          synType: "组织",
          unSynCount: "",
        },
        {
          recordTotal: "",
          synDate: "",
          synFailCount: "",
          synSuccessCount: "",
          synType: "用户",
          unSynCount: "",
        },
      ],
    };
  },
  watch: {
    tabsData() {
      this.baseForm.weCom = JSON.parse(JSON.stringify(this.tabsData));
      this.initData();
    },
  },
  created() {
    this.initData();
    this.allCompanyList();
  },
  mounted() {},
  methods: {
    /**账号change事件 */
    onAccountChange(id, item, index) {
      if (!id) return (this.baseForm.weCom[index].accountName = "");
      this.baseForm.weCom[index].accountConfigId = item.id;
      this.baseForm.weCom[index].name = item.fullName;
      this.settingAccount(this.baseForm.weCom[index]);
    },
    settingAccount(item) {
      getInfo(item.accountConfigId).then((res) => {
        this.$set(item, "qyhCorpId", res.data.enterpriseId);
        this.$set(item, "qyhCorpSecret", res.data.appKey);
        this.$set(item, "qyhAgentId", res.data.agentId);
        this.$set(item, "qyhAgentSecret", res.data.bearer);
        this.$set(item, "token", res.data.appId);
        this.$set(item, "encodingAESKey", res.data.appSecret);
        this.$set(item, "isLinkedCorp", JSON.parse(res.data.programState));
      });
    },
    syncSysToQyWX(row, item) {
      row.loading = true;
      const method =
        row.synType == "组织" ? synAllOrgSysToQyWX : synAllUserSysToQyWX;
      method(item.qyhCorpId, item.qyhAgentId)
        .then((res) => {
          row.recordTotal = res.data.recordTotal;
          row.synDate = res.data.synDate;
          row.synFailCount = res.data.synFailCount;
          row.synSuccessCount = res.data.synSuccessCount;
          row.synType = res.data.synType;
          row.unSynCount = res.data.unSynCount;
          row.loading = false;
          this.$message({
            message: "同步成功",
            type: "success",
            duration: 1500,
          });
        })
        .catch(() => {
          row.loading = false;
        });
    },
    syncPullQyTXLToSys(row, item) {
      row.loading = true;
      const method =
        row.synType == "组织" ? qyWXCorpDeptList : qyWXCorpUserList;
      method(item.qyhCorpId, item.qyhAgentId)
        .then((res) => {
          row.recordTotal = res.data.recordTotal;
          row.synDate = res.data.synDate;
          row.synFailCount = res.data.synFailCount;
          row.synSuccessCount = res.data.synSuccessCount;
          row.synType = res.data.synType;
          row.unSynCount = res.data.unSynCount;
          row.loading = false;
          this.$message({
            message: "同步成功",
            type: "success",
            duration: 1500,
          });
        })
        .catch(() => {
          row.loading = false;
        });
    },

    /**拉取互联企业组织成员信息 */
    pullQyHlToSysAction(row, item) {
      let msg = `您确定执行操作吗？`;
      this.$confirm(msg, "提示", {
        type: "warning",
      })
        .then(() => {
          this.syncPullQyHlToSys(row, item);
        })
        .catch(() => {});
    },
    // 互联企业同步
    syncPullQyHlToSys(row, item) {
      row.loading = true;
      const method =
        row.synType == "组织" ? linkedCorpDepartmentList : linkedCorpUserList;
      method(item.qyhCorpId, item.qyhAgentId)
        .then((res) => {
          row.recordTotal = res.data.recordTotal;
          row.synDate = res.data.synDate;
          row.synFailCount = res.data.synFailCount;
          row.synSuccessCount = res.data.synSuccessCount;
          row.synType = res.data.synType;
          row.unSynCount = res.data.unSynCount;
          row.loading = false;
          this.$message({
            message: "同步成功",
            type: "success",
            duration: 1500,
          });
        })
        .catch(() => {
          row.loading = false;
        });
    },
    initData() {
      if (this.baseForm.weCom && this.baseForm.weCom.length != 0) {
        //处理数据，为已有数据添加action:'edit'
        this.baseForm.weCom.map((item, i) => {
          this.$set(
            item,
            "wxEvents",
            JSON.parse(JSON.stringify(this.wxEvents))
          );
          this.$set(
            item,
            "wxResults",
            JSON.parse(JSON.stringify(this.wxResults))
          );
          item.wxEvents[0].select =
            item.qyhIsSynOrg && item.qyhIsSynOrg == 1 ? true : false;
          item.wxEvents[1].select =
            item.qyhIsSynUser && item.qyhIsSynUser == 1 ? true : false;
          this.$set(item, "action", "edit");

          this.settingAccount(item);
          return item;
        });
        this.handleClick();
      } else {
        this.$set(this.baseForm, "weCom", []);
        let QYHConfig = JSON.parse(JSON.stringify(this.QYHConfig));
        this.$set(
          QYHConfig,
          "wxEvents",
          JSON.parse(JSON.stringify(this.wxEvents))
        );
        this.baseForm.weCom.push(QYHConfig);
      }
    },
    //对部分表单字段进行校验
    validateField(form, index) {
      let result = true;
      for (let item of this.$refs[form].fields) {
        if (item.prop.split(".")[1] == index) {
          this.$refs[form].validateField(item.prop, (error) => {
            if (error != "") {
              result = false;
            }
          });
        }
        if (!result) break;
      }
      return result;
    },

    //对部分表单字段进行重置
    resetField(form, index) {
      this.$refs[form].fields.forEach((item) => {
        if (item.prop.split(".")[1] == index) {
          item.resetField();
        }
      });
    },
    /**保存 */
    submitForm(category) {
      this.$refs.baseForm.validate((valid) => {
        if (valid) {
          // 基础设置
          if (category == CATEGORY) {
            let paramForm = JSON.parse(JSON.stringify(this.baseForm.weCom));
            let _isLinkedCorp = false;
            paramForm.map((item) => {
              if (item.isLinkedCorp) {
                item.qyhIsSynOrg = 0;
                item.qyhIsSynUser = 0;
                _isLinkedCorp = true;
              } else {
                item.qyhIsSynOrg = item.wxEvents[0].select ? 1 : 0;
                item.qyhIsSynUser = item.wxEvents[1].select ? 1 : 0;
              }
              this.$delete(item, "wxEvents");
              this.$delete(item, "wxResults");
              this.$delete(item, "action");

              this.$delete(item, "qyhCorpId");
              this.$delete(item, "qyhCorpSecret");
              this.$delete(item, "qyhAgentId");
              this.$delete(item, "qyhAgentSecret");
              this.$delete(item, "token");
              this.$delete(item, "encodingAESKey");
              this.$delete(item, "qyhComputerUrl");
              this.$delete(item, "qyhMobileUrl");
            });
            if (_isLinkedCorp && paramForm.length != 1) {
              this.$message({
                message: "互联企业只配置一个即可！",
                type: "error",
                duration: 3000,
              });
              return false;
            }

            this.btnLoading = true;
            var jsonForm = JSON.stringify(paramForm);
            var form = {
              category: CATEGORY,
              list: [
                {
                  name: "企业微信信息",
                  key: "weCom",
                  value: jsonForm,
                },
              ],
            };
            updateSystemConfig(form)
              .then((res) => {
                this.$message({
                  message: res.msg,
                  type: "success",
                  duration: 1500,
                  onClose: () => {
                    this.$emit("refresh");
                    this.btnLoading = false;
                  },
                });
              })
              .catch(() => {
                this.btnLoading = false;
              });
          }
        } else {
          this.$message({
            message: "表单校验未通过，请核对所有企业微信配置信息",
            type: "error",
            duration: 3000,
          });
          return false;
        }
      });
    },
    dataList() {
      return _paramForm;
    },
    checkQy(type, item) {
      type === 1 ? (this.testSyncLoading = true) : (this.testQyLoading = true);
      const data = {
        qyhAgentId: item.qyhAgentId,
        qyhAgentSecret: item.qyhAgentSecret,
        qyhCorpId: item.qyhCorpId,
        qyhCorpSecret: item.qyhCorpSecret,
      };
      testQy(data, type)
        .then((res) => {
          this.$message({
            message: res.msg,
            type: "success",
            duration: 1500,
            onClose: () => {
              type === 1
                ? (this.testSyncLoading = false)
                : (this.testQyLoading = false);
            },
          });
        })
        .catch(() => {
          type === 1
            ? (this.testSyncLoading = false)
            : (this.testQyLoading = false);
        });
    },
    allCompanyList() {
      getAllCompanyList().then((res) => {
        this.companyList = res.data.list;
      });
    },
    handleClick(tab, event) {
      let item = this.baseForm.weCom[this.editableTabsValue];
      if (item.action && item.action == "edit") {
        this.getWxCpSynInfoTotal(item);
      }
    },
    getWxCpSynInfoTotal(item) {
      if (item && item.qyhCorpId && item.qyhAgentId) {
        if (item.isLinkedCorp) {
          getSynThirdTotal(1).then((res) => {
            let list = res.data.map((o) => ({ loading: false, ...o }));
            if (list && list.length != 0) {
              this.$set(item, "wxResults", list);
            } else {
              this.$set(
                item,
                "wxResults",
                JSON.parse(JSON.stringify(this.wxResults))
              );
            }
          });
        } else {
          getWxCpSynThirdInfoTotal(item.qyhCorpId, item.qyhAgentId).then(
            (res) => {
              let list = res.data.map((o) => ({ loading: false, ...o }));
              if (list && list.length != 0) {
                this.$set(item, "wxResults", list);
              } else {
                this.$set(
                  item,
                  "wxResults",
                  JSON.parse(JSON.stringify(this.wxResults))
                );
              }
            }
          );
        }
      }
    },
    handleTabsEdit(targetName, action) {
      if (action === "add") {
        let weComLength = this.baseForm.weCom.length;
        let QYHConfig = JSON.parse(JSON.stringify(this.QYHConfig));
        this.$set(
          QYHConfig,
          "wxEvents",
          JSON.parse(JSON.stringify(this.wxEvents))
        );
        this.baseForm.weCom.push(QYHConfig);
        this.editableTabsValue = weComLength + "";
      }
      if (action === "remove") {
        this.editableTabsValue = targetName;
        let tabs = JSON.parse(JSON.stringify(this.baseForm.weCom));
        let targetTab;
        let nextActive;
        tabs.forEach((tab, index) => {
          let tempIndex = index + "";
          if (tempIndex === targetName) {
            targetTab = tab;
            nextActive = (tabs[index + 1] ? index : index - 1) + "";
            // let nextTab = tabs[index + 1] || tabs[index - 1];
          }
        });
        if (targetTab) {
          let msg = `您确定要删除企业名称[${targetTab.name}]企业号Id[${targetTab.qyhCorpId}]应用凭证[${targetTab.qyhAgentId}]吗？`;
          this.$confirm(msg, "提示", {
            type: "warning",
          })
            .then(() => {
              this.baseForm.weCom = tabs.filter(
                (tab, index) => index != targetName
              );
              this.editableTabsValue = nextActive;
            })
            .catch(() => {});
        }
      }
    },
    // removeTab(tabs, targetName, targetTab, nextActive) {
    //   this.baseForm.weCom = tabs.filter((tab, index) => index != targetName);
    //   console.log('remove  baseForm.weCom', this.baseForm.weCom);
    //   this.submitForm("WeComConfig");
    // }
  },
};
</script>

<style lang="scss" scoped>
.systemConfig {
  padding: 0;

  .saveBtn {
    width: 100px;
  }
}
</style>
